window.addEventListener("load", function () {
  // console.log(222);
  /* 
    轮播图的效果：
      1. 自动轮播。
      2. 点击左侧按钮轮播
      3. 点击下面的小圆点轮播
  
  */
  //  获取元素
  var arrowR = document.querySelector(".arrow-r");
  var arrowL = document.querySelector(".arrow-l");
  var focus = document.querySelector(".focus");
  var ul = focus.querySelector("ul");
  var ol = focus.querySelector("ol");

  // 轮播图的宽度
  var foucusWidth = focus.offsetWidth;
  // console.log(foucusWidth);
  //  1. 左侧按钮的显示隐藏
  focus.addEventListener("mousemove", function () {
    arrowR.style.display = "block";
    arrowL.style.display = "block";
    // 清除定时器
    clearInterval(timer);
    timer = null;
  });
  focus.addEventListener("mouseout", function () {
    arrowR.style.display = "none";
    arrowL.style.display = "none";
    // 开启定时器
    timer = setInterval(function () {
      // 手动调用元素的事件
      arrowR.click();
    }, 1500);
  });
  // 2. 动态生成小圆圈  根据图片的个数，产生对应的小圆圈
  for (var i = 0; i < ul.children.length; i++) {
    var li = document.createElement("li");
    // 自定义属性，index
    li.setAttribute("index", i);
    ol.appendChild(li);
    // 3. 点击小圆圈，改变样式
    li.addEventListener("click", function () {
      // 3.1 先清除全部的样式
      for (var j = 0; j < ol.children.length; j++) {
        ol.children[j].className = "";
      }
      // 3.2 点击的li，样式改变
      // console.log(this);
      this.className = "current";

      // 4. 点击小圆圈，图片(ul)移动。向左移动
      /* 
          1     0
          2     1*轮播图的宽度
          3     2*轮播图的宽度
          4     3*轮播图的宽度
      
      */
      var index = this.getAttribute("index");
      // 小圆圈计数器和左按钮点击的计数器需要同步
      circle = index;
      num = index;
      // console.log(index);
      // console.log(-index * foucusWidth);
      //  var juli = index*foucusWidth;
      // console.log(ul);
      animate(ul, -index * foucusWidth);
    });
  }
  ol.children[0].className = "current";

  // 6. 克隆最后一张图片，追加到 ul
  var li = ul.children[0].cloneNode(true);
  ul.appendChild(li);
  // 5. 点击右侧按钮，播放下一张
  /* 
    计数器 num  
    1*foucusWidth
    2 *foucusWidth
    3 *foucusWidth
  
  */
  //  按钮的计数器 num
  var num = 0;
  // 小圆圈的计数
  var circle = 0;
  arrowR.addEventListener("click", function () {
    console.log(123);
    if (num == ul.children.length - 1) {
      // 瞬间移动到第一张
      ul.style.left = 0;
      // 从第一张开始轮播
      num = 0;
    }
    num++;
    circle++;
    if (circle == ol.children.length) {
      circle = 0;
    }

    animate(ul, -num * foucusWidth);
    // 7. 小圆圈样式跟随变动
    // 7.1 清除所有样式
    for (var k = 0; k < ol.children.length; k++) {
      ol.children[k].className = "";
    }
    // 7.2 当前的样式改变
    ol.children[circle].className = "current";
  });
      // 8. 自动轮播
      var timer = setInterval(function () {
        // 手动调用元素的事件  手动点击右侧按钮
        arrowR.click();
      }, 1500);
});